<style scoped>
  .terraces  .box{
    padding:0px 30px;
    margin:0 auto;
}
   .terraces    .tabbox{
        margin:20px 0;
    }
  .terraces    .color{
       backgorund-color:#2CB8F5 !important;
   }
   .terraces   .big{
       font-size: 33px;
       color:#8A8A8A;
       display:inline-block;
       vertical-align: top;
   }
    .terraces  .teamList{
       display:inline-block;
   }

    .terraces  .teamList .list{
       margin-left: 30px;
       display: inline-block;
       border:1px solid #c3c3c3;
       height:150px;
       width:350px;
       padding:35px;
       border-radius: 5px;
       margin-bottom: 30px;
       position: relative;
       cursor:pointer;
       transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
   }
   
    .terraces  .teamList .list .addr{
       position:absolute;
       right:0;
       top:0;
       height:30px;
        display: inline-block;
        padding:0 10px;
       border-left:1px solid #c3c3c3;
       border-bottom:1px solid #c3c3c3;
        border-radius:0 0 0 15px;
         text-align:center;
        line-height: 30px;
        transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
   }
    .terraces  .teamList .list .imgBox{
       border:1px solid #EEE;
       border-radius: 50%;
       display: inline-block;
       height:80px;
       width:80px;
       text-align: center;
       /*padding:15px;*/
       overflow: hidden;
   }
     .terraces  .teamList .list .text{
       font-size:29px;
       display: inline-block;
       line-height: 80px;
       vertical-align: top;
       margin-left:15px;
       font-weight: 500;
   }

     .terraces  .teamList .list:hover{
       border-color: #2DB6F4;
       position: relative;
       top: -10px;
       box-shadow:  0px 2px 10px #fff, 0px 2px 10px gray;  
       transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
       /* transform:scale(1,1.1) */
   }
    .terraces  .teamList .list:hover .imgBox{
      border-color: #2DB6F4; 
       box-shadow:  0px 2px 5px #fff, 0px 2px 6px gray;  
       transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
       
   }
    .terraces  .teamList .list:hover .text{
       color: #2DB6F4;
   }
     .terraces  .teamList .list:hover .imgBox{
       border-color: #2DB6F4;
   }
  .terraces  .teamList .list:hover .addr{
    border-color: #2DB6F4;
    background: #2DB6F4;
     color: #fff;
     transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out;
}
    .terraces  .tabList{
       padding:7px 12px;
       color:#2CB8F5;
       border-radius:4px;
       margin-right:5px;
       cursor: pointer;
   }
    .terraces  .tabList.activated{
       background-color: #2CB8F5;
       color:#FFF;
   }
     .terraces  .href{
        position:fixed;
        right:25px;
        top:25%;
    }
   .terraces    .href .hrefList{
        height:20px;
        width:20px;
        background-color:#EDEDEC;
        border-radius:50%;
        margin-top:10px;
        text-align:center;
        line-height:20px;
        cursor:pointer;
        display:block;
        color:#879094;
    }
  .terraces  .href .hrefList:hover{
    color:#FFF;
    background-color:#00AAED;
}
  .terraces  .href .hrefList.activated{
    /*color:#FFF;*/
    /*background-color:#00AAED;*/
}
</style>
<style>
/* .tabbox .ivu-tabs-bar{
       border:none;
   }
    .tabbox .ivu-tabs-tab{
        border:none !important;
        color:#2CB8F5;
        background-color:#FFF !important;
        border-radius:4px !important;
    }
    .tabbox .ivu-tabs-tab-active{
        background-color:#2CB8F5 !important;
        color:#FFF !important;
    } */

     .terraces  .tabbox .ivu-select-selection{
       /* display:inline-block !important; */
       height: 36px ;
   }
  /* .terraces .ivu-select{
    border:1px solid #bebebe;
   } */
  .terraces .tabbox  .ivu-select{
       width:88% !important;
   }
</style>
<template>
    <div class="terraces">
        <product-title></product-title>
        <div class="box">
            <div class="common-box-body">
                <Row class="tabbox">
                    <Col :md="24" :lg="12">
                        <span class="tabList" @click="change1(1)" :class="index==1?'activated':' '">常用</span>
                        <span class="tabList" @click="change1(0)" :class="index==0?'activated':' '">全部</span>
                    </Col>
                    <Col :md="24" :lg="3">
                        &nbsp;
                    </Col>
                    <Col :md="24" :lg="9">
                        <Select v-model="name" @on-change="nameChange">
                            <Option value="0">全部</Option>
                            <template v-for="item in all_team">
                                <template v-for="item1 in item">
                                    <Option :value="item1.name">{{item1.name}}</Option>
                                </template>
                            </template>
                        </Select>
                        <Button type="primary" class="radius" @click="search">搜索</Button>
                    </Col>
                </Row>
                <Row>
                    <Col span="24">
                        <template v-for="(item,index) in search_team">
                          <div class="" style="padding-top:30px;border-bottom:1px solid #E4E4E4;">
                            <div class="big" :id="index"> {{index}}</div>
                                <div class="teamList">
                                    <template v-for="(item1,index1) in item">
                                        <span class="list" @click="move(item1.online_url)">
                                            <span class="imgBox">
                                                <img :src="item1.logo" alt="" style="width:80px;height:80px;">
                                            </span>
                                            <span class="text">{{item1.name}}</span>
                                            <span class="addr" v-if="item1.tip">
                                                {{item1.tip}}
                                            </span>
                                        </span>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </Col>
                </Row>
            </div>
            <div class="href">
                <template v-for="(item,index) in search_team">
                    <a class="hrefList"  @click="hrefChange(index)" :class="href==index?'activated':' '" :href="'#'+index">{{index}}</a>
                </template>
                <!--<div class="hrefList actived">A</div>-->
                <!--<div class="hrefList">C</div>-->
            </div>
        </div>
    </div>
</template>
<script>
import productTitle from '../../components/productTitle'
import {car_all_team} from '../../api/car'
    export default {
        data() {
            return {
                index:0,
                all_team:[],
                href:'',
                usually:0,
                name:'',
                search_team:[]
            }
        },
        created(){
            this.get_all_team();
            this.search_team1();
//            window.onscroll=function(){
//                document.getElementById(this.href).
//                alert(document.body.scrollTop);
//            }
        },
        components:{
            productTitle
        },
        methods:{
            get_all_team(){
//                let params ={
//                    usually:this.index,
//                    name:this.name
//                }
                new Promise((rev,rej)=>{
                    car_all_team().then(res=>{
                        this.all_team = res.data.data;
                    })
                })
            },
            search_team1(){
                let params ={
                    usually:this.index,
                    name:this.name
                }
                new Promise((rev,rej)=>{
                    car_all_team(params).then(res=>{
                        this.search_team = res.data.data;
                    })
                })
            },
            change1(id){
                this.index = id;
                this.href="";
                this.search_team1();
            },
            hrefChange(index){
                this.href=index;
            },
            nameChange(value){
                this.name=value;
            },
            search(){
                this.search_team1();
            },
            move(url){
                window.open(url);
            }
        }
    }
</script>